<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="600">
      <Form
        ref="operateModal"
        :model="row"
        :rules="ruleInline"
        inline
        style="width: 100%"
        :label-width="80">
        <FormItem prop="name" label="项目名称" style="width: 250px">
          <Input type="text" v-model="row.name" placeholder="请输入项目名称" />
        </FormItem>
        <!-- <FormItem prop="ctime" label="创建时间" style="width: 250px">
           <DatePicker v-model="row.ctime" type="date" placeholder="请输入创建时间"></DatePicker>
        </FormItem> -->
        <FormItem prop="unitprice" label="推广单价(元)" style="width: 250px">
          <Input type="text" v-model="row.unitprice" placeholder="请输入推广单价" />
        </FormItem>
        <FormItem prop="state" label="启用状态" style="width: 250px">
          <Select v-model="row.state" clearable placeholder="请选择启用状态">
            <Option value="0">
              启用
            </Option>
            <Option value="1">
              禁用
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="url" label="项目地址" style="width: 250px">
          <Input type="text" v-model="row.url" placeholder="请输入项目地址" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'OperateModal',
  data () {
    return {
      title: '添加项目记录',
      loading: true,
      form: {
        name: '',
        ctime: '',
        unitprice: '',
        state: '',
        url: ''
      },
      ruleInline: {
        name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      row: state => state.operate.row,
      modalState: state => state.modal.modalState
    })
  },
  methods: {
    ...mapActions([
      'updateModalState',
      'getProidList'
    ]),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.operateModal.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('operate-valid', {
          id: this.row.id,
          name: this.row.name,
          // ctime: this.row.ctime ? this.$moment(this.row.ctime).format('YYYY-MM-DD') : '',
          unitprice: this.row.unitprice ? this.row.unitprice : '',
          state: this.row.state ? parseInt(this.row.state) : '',
          url: this.row.url ? this.row.url : ''
        })
        this.$refs['operateModal'].resetFields()
      })
    },
    cancel () {
      this.updateModalState(false)
      this.$refs['operateModal'].resetFields()
    }
  }
}
</script>
